<template>
	<view class="content">
		<view class="header">
			<u-tabs :list="list1" @change="tabsChange"></u-tabs>
			<u-search v-model="requestParams.workOrderId" placeholder="请输入工单号进行搜索" :clearabled="true"
				:showAction="false"></u-search>
		</view>
		<view class="main">
			<view class="main_body" v-for="(item,index) in dataForm" :key="index">
				<view class="detail">
					<view class="title">
						<view class="main_body_view main_body_view_title">
							<u-row>
								<u-col span="8">{{item.workOrderId}}</u-col>
								<u-col span="4">{{buttonStatus(item.workOrderStatusId)}}</u-col>
							</u-row>
						</view>
					</view>
					<view class="main_content">
						<view class="main_body_view main_body_view_view">
							客户：{{item.customerCompanyName}}
						</view>
						<view class="main_body_view main_body_view_view">
							时间：{{item.preArriveCustomerTime|formatDate('MM-dd HH:mm')}}
						</view>
						<view class="main_body_view">
							联系：{{item.customerCompanyConnUsername}}/{{item.customerCompanyConnUserTel}}
						</view>
						<view class="main_body_view">地址：{{item.province}}/{{item.city}}/{{item.district}}</view>
						<view class="main_body_view">{{item.recycleAddress||''}}</view>
						<text class="main_body_view">备注：{{item.dispWorkOrderRemark||''}}</text>
					</view>
				</view>
				<view>
					<view class="button" style="margin-bottom: 10px;">
						<u-button @click="buttonClick(item.workOrderId,item.workOrderStatusId)" type="primary" size="mini"
							:text="buttonText(item.workOrderStatusId)"></u-button>
					</view>
				</view>
				<view class="footer" />
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js"
	export default {
		data() {
			return {
				dataForm: [],
				requestParams: {
					workOrderId: '', //工单id
					// sortUserId: this.$store.state.user.userId, //工程师id
					pageNum: 1,
					pageSize: 10,
					workOrderStatusIds: '43,47, 51,63' //工单状态
				},
				notStatus: '43, 47, 51, 63',
				yesStatus: '53',
				title: 'Hello',
				list1: [{
					name: '未完成',
				}, {
					name: '已完成',
				}],
				// buttonText:'按钮'
			}
		},
		onLoad: function() {
			uni.showLoading({
				title: '正在加载中'
			})
			this.getFormData();
			uni.hideLoading()
		},
		onReachBottom() {
			this.requestParams.pageNum = this.requestParams.pageNum - 0 + 1;
			this.getFormData()
		},
		watch: {
			'requestParams.workOrderId'(newVal, oldVal) {
				this.changeSelect(newVal);
			}
		},
		filters: {
			formatDate: function(value, args) {
				var dt = new Date(value);
				if (args == 'yyyy-M-d') { // yyyy-M-d
					let year = dt.getFullYear();
					let month = dt.getMonth() + 1;
					let date = dt.getDate();
					return `${year}-${month}-${date}`;
				} else if (args == 'yyyy-M-d H:m:s') { // yyyy-M-d H:m:s
					let year = dt.getFullYear();
					let month = dt.getMonth() + 1;
					let date = dt.getDate();
					let hour = dt.getHours();
					let minute = dt.getMinutes();
					let second = dt.getSeconds();
					return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
				} else if (args == 'yyyy-MM-dd') { // yyyy-MM-dd
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2, '0');
					let date = dt.getDate().toString().padStart(2, '0');
					return `${year}-${month}-${date}`;
				} else { // yyyy-MM-dd HH:mm:ss
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2, '0');
					let date = dt.getDate().toString().padStart(2, '0');
					let hour = dt.getHours().toString().padStart(2, '0');
					let minute = dt.getMinutes().toString().padStart(2, '0');
					let second = dt.getSeconds().toString().padStart(2, '0');
					return `${month}-${date} ${hour}:${minute}`;
				}
			}
		},
		methods: {
			buttonStatus(statusId) {
				let text = "";
				switch (statusId) {
					case "47":
						text = "待入库";
						break;
					case "43":
						text = "待入库";
						break;
					case "63":
						text = "已完成-拆解";
						break;
					case "51":
						text = "入库中-入库";
						break;
					case "53":
						text = "已完成-入库";
						break;
					default:
						text = '未知';
						break;
				}
				return text;
			},
			buttonText(statusId) {
				let text = "";
				switch (statusId) {
					case "47":
						text = "接单";
						break;
					case "43":
						text = "接单";
						break;
					case "63":
						text = "接单";
						break;
					default:
						text = "详情";
						break;
				}
				return text;
			},
			// 点击按钮
			detailsClick(workId) {
			   uni.navigateTo({
			     url: "detailcheck?workId=" + workId
			   });
			 },
			buttonClick(workId, itemNum) {
				uni.showLoading({
					title: '正在加载中'
				})
				let requestData = {
					workOrderId: workId,
					method: '',
					workOrderStatusId: ''
				}
				if (['47', '43', '63'].includes(itemNum)) {
					const self = this; // 保存当前对象的引用
					uni.showModal({
						title: '确定接单吗',
						success: function (res) {
							if (res.confirm) {
								requestData.method = "start_in_house"
								request({
									url: 'system/order',
									method: "PUT",
									data: requestData
								}).then((res) => {
									self.dataForm.length = 0;
									self.getFormData();
									uni.hideLoading()
								})
							} else if (res.cancel) {
								return
							}
						}
					})
					uni.hideLoading()
					return
				} else if (itemNum == "51" || itemNum  == "53") {
					uni.navigateTo({
						url: "detail?workId=" + workId
					})
					uni.hideLoading()
					return 
				}
			},
			// 完成未完成
			tabsChange(item) {
				uni.showLoading({
					title: "正在加载中"
				})
				if (item.index === 0) {
					this.requestParams.workOrderStatusIds = this.notStatus;
				} else {
					this.requestParams.workOrderStatusIds = this.yesStatus;
				}
				this.requestParams.pageNum = 1;
				this.dataForm.length = 0;
				this.getFormData();
				uni.hideLoading()
			},
			//查询用户信息
			// async getInfo() {
			// 	const res = await request({
			// 		url: "system/user/profile",
			// 		method: 'GET'
			// 	});
			// 	this.requestParams.recycleUserId = res.data.user.userId;
			// },
			// 查询列表数据
			getFormData() {
				request({
					url: 'system/order/list',
					method: "GET",
					data: this.requestParams
				}).then((res) => {
					this.requestParams.pageNum -= (!res.rows);
					if (this.dataForm.length < res.total) {
						this.dataForm = this.dataForm.concat(res.rows);
					}
				})
			},
			// 搜索功能
			changeSelect(item) {
				uni.showLoading({
					title: "正在加载中"
				})
				this.requestParams.workOrderId = item + '';
				this.requestParams.pageNum = 1;
				this.dataForm.length = 0;
				this.getFormData();
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: rgb(244, 249, 254);
		.header {
			box-sizing: border-box;
			width: 100%;
			position: sticky;
			top: 0;
			z-index: 999;
			display: flex;
			overflow: hidden;
			justify-content: space-around;
			background:#f4f9fe;
			box-shadow:0px 3px 10px rgba(0, 124, 233, 0.16);
			margin-bottom: 10upx;
			/deep/ .u-search__content {
				background-color: #ffffff !important;
			}
			/deep/ .u-search__content__input {
				background-color: #ffffff !important;
			}
		}
		
		.main {
			margin-bottom: 100px;
			
		
			.main_body {
				background-color: rgb(226, 241, 255);
				margin: 20upx;
				border-radius: 2%;
				border:1px solid;
				border-color:rgba(0, 124, 233, 0.4);
				.title {
					border-bottom:1px solid;
					border-color:rgb(140, 196, 246);
					padding: 20upx;
					.main_body_view {
						margin: 10upx;
					}
							
					.main_body_view_title {
						
						margin-bottom: 10upx;
					}
				}
				.main_content {
					padding: 20upx;
					background-color: #ffffff;
				}
				
				.button {
					position: absolute;
					// bottom: 30upx;
					right: 100upx;
					// top: 50upx;
					width: 40rpx;
				}
				.footer{
					height:30px;
					background-color: #ffffff;
					border-bottom-left-radius: 15upx;
					border-bottom-right-radius: 15upx;
				}
			}
		}	
		.tabbar {
			position: sticky;
			bottom: 30upx;
			z-index: 999;
		}
	}
</style>